<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>

    <style>
        .home-page {

            border: rgb(255, 255, 255) solid 1px;
            height: 950px;
            background-image: linear-gradient(to bottom, #e3eeee, white);
            background-position: to center;

        }

        .menu {
            border: rgb(255, 255, 255) solid 1px;
            height: 60px;
            background-color: rgb(0, 0, 0);
            display: flex;
            align-items: center;
            /*垂直居中*/
        }

        .menu1 {
            list-style-type: none;
            margin-left: 5%;
            overflow: hidden;
        }

        .menu2 {
            text-align: center;
            color: white;
            float: left;
            width: 140px;
            font-size: large;


        }

        .menu2:hover {
            color: #00b4b3;
        }

        .usercenter {
            list-style-type: none;
            overflow: hidden;
            float: left;
            color: rgb(255, 255, 255);
            font-size: large;
            display: flex;
            margin-left: 800px;

        }

        .usercenter:hover {
            color: #00b4b3;
        }

        .exit {
            list-style-type: none;
            overflow: hidden;
            float: left;
            color: black;
            font-size: 25px;
            display: flex;
            margin-left: 1600px;
            margin-top: 830px;


        }


        .exit:hover {
            color: aquamarine;
        }



        .user {
            position: absolute;
            background-color: white;;
            width: 320px;
            height: 150px;
            margin-left: 8%;
            margin-top: 5%;
            border-radius: 15px;

        }
        
        .circle-avatar{
            position: absolute;
            width: 50px;
            height: 50px;
            margin-top:5% ;
            margin-left: 11%;
            border-radius: 50%; /* 边框半径为50%，即圆形 */
            overflow: hidden; /* 隐藏溢出的部分 */
            background-image: url("/image/头像.jpg");
            background-size: 100% 100%;

        }

        .button {
            position: absolute;
            margin-left: 13%;
            margin-top: 15%;
            display: flex;
            flex-direction: column;

        }

        .button1 {
            border-radius: 15px;
            border: none;

            position: relative;
            width: 170px;
            height: 70px;
            margin-top: 50px;
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            font-size: 19px;
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        .button1:hover {
            background-color: #aababa;
            /* 鼠标悬停时的背景颜色变化 */
        }

        .button1:active {
            background-color: #aababa;
        }

        .function {
            border: none;
            position: absolute;
            width: 600px;
            height: 700px;
            margin-left: 40%;
            margin-top: 5%;
            background-color: rgb(250, 250, 250);
        }

        .old {
            margin-top: 150px;
            text-align: center;
            
        }

        .old input {
            font-size: large;
            width: 65%;
            height: 40px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .new {
            margin-top: 60px;
            text-align: center;
        }

        .new input {
            font-size: large;
            border-radius: 60px;
            width: 65%;
            height: 40px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .new1 {
            margin-top: 60px;
            text-align: center;
        }

        .new1 input {
            font-size: large;
            width: 65%;
            height: 30px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        #bt {
            display: flex;
            margin: 0 auto;
            /* 水平居中 */
            margin-top: 70px;
            border-radius: 15px;
            width: 150px;
            height: 50px;
            background-color: #ddd;
            color: rgb(0, 0, 0);
            /* 设置文字颜色 */
            font-size: 16px;
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        #bt:hover {
            background-color: #aababa;
            /* 鼠标悬停时的背景颜色变化 */
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="home-page">
            <div class="menu">
                <h2 style="margin-left: 10%;color : #2fdfd1 ">聘途</h2>
                <ul class="menu1">
                    <a href="首页.html">
                        <li class="menu2">首页</li>
                    </a>
                    <a href="推荐.html">
                        <li class="menu2">推荐</li>
                    </a>
                    <a href="首页公司.html">
                        <li class="menu2">公司</li>
                    </a>
                    <a href="APP.html">
                        <li class="menu2">APP</li>
                    </a>

                </ul>

                <a href="修改密码.html">
                    <li class="usercenter"> {{ userInfo.sname }}</li>
                </a>

            </div>


            <div class="user">
                <div class="circle-avatar" >
                   
                  </div>
                  
                <p style="margin-left: 100px;margin-top: 30px;font-size: 22px;"><b>{{userInfo.sname}}</b></p>
                <p style="margin-left: 100px;margin-top: 40px;color: #4a4646; ">20岁 | {{sedu2}} | {{userInfo.sgender}}</p>

            </div>

            <div class="button">
                <button class="button1 " @click="setActivePage('page1')">修改密码</button>
                <button class="button1" @click="setActivePage('page2')">编写简历</button>
                <button class="button1" @click="setActivePage('page3')">已投递</button>

            </div>



            <div class="function">
                <form @submit.prevent="submitForm">
                    <div class="old">
                        <input type="password" v-model="oldpassword" placeholder="请输入旧密码">
                    </div>
                    <div class="new">
                        <input type="password" v-model="newpassword" placeholder="请输入新密码">
                        <p v-if="newpasswordError" style="color: red; text-align: center; margin-top: 5px;">
                            {{newpasswordError }}</p>
                    </div>
                    <div class="new1">
                        <input type="password" v-model="newpassword1" placeholder="请确认新密码">
                    </div>
                    <div class="submit">
                        <input type="submit" value="修改密码" id="bt">
                    </div>

                </form>


            </div>

            <a href="/登录注册/用户登录.html">
                <li class="exit">退出登录</li>
            </a>
        </div>

    </div>
    <script>
        var userInfo = JSON.parse(sessionStorage.getItem('userData'));
        var sedu2 = '';
        switch (userInfo.sedu) {
            case 1:
                sedu2 = "小学";
                break;
            case 2:
                sedu2 = "初中";
                break;
            case 3:
                sedu2 = "高中";
                break;
            case 4:
                sedu2 = "大学";
                break;
            case 5:
                sedu2 = "研究生";
                break;
            case 6:
                sedu2 = "博士";
                break;

        }




        new Vue({
            el: '#app',
            data: {
                activePage: null,
                oldpassword: '',
                newpassword: '',
                newpassword1: '',
                newpasswordError:'',


            },
            methods: {

                checkPassword(newpassword) {
                    // 密码至少6-10个字符
                    const regex = /^[a-zA-Z\d]{6,10}$/;
                    return regex.test(newpassword);
                },

                setActivePage(page) {
                    this.activePage = page;
                    switch (page) {
                        case 'page1':
                            window.location.href = "修改密码.html";
                            break;
                        case 'page2':
                            window.location.href = "编写简历.html";
                            break;
                        case 'page3':
                            window.location.href = "已投递.html";
                            break;
                    }
                },

                submitForm() {

                    this.newpasswordError = '';
                    
             

                  
                    if (!this.checkPassword(this.newpassword)) {
                        this.newpasswordError = '密码不符合要求';
                        return
                    }

                    if (this.newpassword1 !== this.newpassword) {
                        alert('请确保密码输入一致');
                        return;
                    }

                    if (this.oldpassword!== userInfo.spassword) {
                        alert('请确保旧密码输入正确');
                        return;
                    }

                     // 检查所有错误信息是否为空
                     const errors = [this.newpasswordError];
                    const hasErrors = errors.some(error => error);

                    if (hasErrors) {
                        // 如果存在错误，则不继续提交表单
                        return;
                    }

                    
                    let data = new FormData();
                    data.append("susername", userInfo.susername);
                    data.append("newPassword", this.newpassword);
                 
                    axios.post('http://localhost:8080/hqdx/seeker/revisePassword', data)
                        .then(response => {
                            console.log(response.data);
                            alert("修改密码成功")
                        })
                        .catch(error => {
                            console.log(error);
                        });


                }

            }

        })
    </script>
</body>

</html>